<template>
  <el-table
    :data="data"
    size="small"
    class="el-table"
    :height="height ? height : 420"
  >
    <el-table-column class-name="color0" prop="name" label="账号名" width="100">
      <template #default="scope">
        <span class="text-ellipsis">{{ scope.row.name }}</span>
      </template>
    </el-table-column>
    <el-table-column
      class-name="text-center color2 fw-bold"
      prop="count"
      label="练习量"
      width="70"
    >
      <template #default="scope">
        <MynumberVue :num="Number(scope.row.count)"></MynumberVue>
      </template>
    </el-table-column>

    <el-table-column
      class-name="color1 text-center fw-bold"
      prop="videocount"
      label="视频学习量"
      width="100"
    >
      <template #default="scope">
        <MynumberVue :num="Number(scope.row.videocount)"></MynumberVue>
      </template>
    </el-table-column>
    <el-table-column prop="count" label="练习正确率" width="160">
      <template #default="scope">
        <el-progress
          class="el-progress"
          :stroke-width="8"
          :percentage="Number(scope.row.Accuracy)"
        />
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import MynumberVue from "../../components/animejs/mynumber.vue";
import Studycodemodel from "../../mysql_interface/studycodemodel";

defineProps<{
  data: Studycodemodel.Iuser[];
  centerref: any;
  chat: string;
  height?: number | string;
}>();
</script>

<style scoped>
.el-table {
  --el-table-bg-color: rgba(0, 0, 0, 0);
  --el-table-text-color: #fff;
  --el-table-header-text-color: #fff;
  --el-table-header-bg-color: var(--el-table-bg-color);
  --el-table-tr-bg-color: var(--el-table-bg-color);
  --el-table-row-hover-bg-color: var(--el-table-bg-color);
  --el-table-border: none;
  --el-table-border-color: var(--el-table-bg-color);
}

.el-progress {
  margin-top: 4.5px;
  --el-border-color-lighter: rgba(255, 255, 255, 0.5);
}

.span {
  cursor: pointer;
}

.span:hover {
  font-weight: 700;
}

.text-ellipsis {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.text-ellipsis:hover {
  font-weight: 700;
}
</style>
<style>
.el-progress-bar__inner {
  background: linear-gradient(315deg, #0670f8 0%, #34c7fc 100%);
}
</style>
